<template>
    <div>
        <el-form :model="userForm" label-width="120px" :rules="userFormRules" ref="userFormRef">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userForm.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="userForm.password" type="password" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select
                v-model="userForm.gender"
                placeholder=""
              >
                <el-option label="匿名" :value="0" />
                <el-option label="男" :value="1" />
                <el-option label="女" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="角色" prop="role">
              <el-select
                v-model="userForm.role"
                placeholder=""
              >
                <el-option label="管理员" :value="1" />
                <el-option label="编辑" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="描述" prop="introduction">
              <el-input type="textarea" v-model="userForm.introduction" />
            </el-form-item>

            <el-form-item label="头像" prop="avatar">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleChange"
              >
                <img
                  v-if="userForm.avatar"
                  :src="userForm.avatar "
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="submitForm()">添加</el-button>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="send()">获取数据</el-button>
    </div>
</template>

<script setup>
import {reactive ,ref,computed} from 'vue'
import { Plus, } from "@element-plus/icons-vue";
import upload from '@/util/upload';
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import axios from 'axios';
const router = useRouter();
const userFormRef = ref();
const userForm = reactive({
  username: "",
  gender: 1,
  role:2,
  introduction: "",
  avatar: "",
  password:"",
  file:null
});
const uploadAvatar =  ref("");
const userFormRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  gender: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  introduction: [{ required: true, message: "请输入介绍", trigger: "blur" }],
  avatar:[{ required: true, message: "请输入介绍", trigger: "blur" }],
  role:[{ required: true, message: "请选择角色", trigger: "blur" }],
  password:[{ required: true, message: "请选择角色", trigger: "blur" }]
});
const handleChange = (file) => {
  console.log('file',file)
  console.log('URL.createObjectURL(file.raw)',URL.createObjectURL(file.raw))
  userForm.avatar = URL.createObjectURL(file.raw);
  userForm.file = file.raw
//   uploadAvatar = 
}

const send = async() => {
  
 let res = await axios.get('https://st2st2api2023.quyanedu.com/api/index/subject_info?member_id=274081&subject_id=43050&key=7d74b4f852c9355ef3518b1790f99c27&disid=40')
  console.log('res',res)
}


const submitForm = () => {
  userFormRef.value.validate(async (valid) => {
    if(valid) {
      console.log('valid',userForm)
      const res = await upload("/adminapi/user/add",userForm);
      if(res.data.code == 200) {
        ElMessage.success('添加成功');
        router.push('/userManage/userList');
      }else if(res.data.code == 201){
        ElMessage.error('用户名已存在');
      }else{
        ElMessage.error('添加失败');
      }
      console.log("fromres",res)
    }
  })
}

</script>

